<template>
    <div>
        <!-- 顶部卡片 -->
        <Category :scene="scene"></Category>
        <!-- 底部卡片 -->
        <el-card style="margin: 10px 0;">
           <div v-show="scene==0">
             <!-- 添加SPU按钮 -->
             <el-button @click="addSku" type="primary" icon="Plus" :disabled="!useCategroystore.c3Id">新增SPU</el-button>
                <!-- 表格 -->
                <el-table border style="margin: 10px 0;" :data="records">
                    <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
                    <el-table-column label="SPU名称" prop="name"></el-table-column>
                    <el-table-column label="SPU描述" prop="description"></el-table-column>
                    <el-table-column label="操作">
                        <template #="{row}">
                            <el-button @click="addSpu(row)" type="primary" size="small" icon="Plus" title="添加SPU"></el-button>
                            <el-button @click="updateSpu(row)" type="primary" size="small" icon="Edit" title="修改SPU"></el-button>
                            <el-button @click="findSku(row)" type="primary" size="small" icon="View" title="查看SPU列表"></el-button>
                            <el-popconfirm @confirm="removeSpu(row)" :title="`你确定要删除${row.name}吗?`" width="200px">
                                <template #reference>
                                    <el-button type="primary" size="small" icon="Delete" title="删除SPU"></el-button>
                                </template>
                            </el-popconfirm>
                            
                        
                        </template>
                    </el-table-column> 
                </el-table>
                <!-- 分页器 -->
                <el-pagination
                    v-model:current-page="pageNow"
                    v-model:page-size="pageSize"
                    :page-sizes="[3,5,7,9]"
                    :background="true"
                    layout=" prev, pager, next, jumper,->,sizes,total"
                    :total="total"
                    @current-change="getHas"
                    @size-change="sizeChange"
                    ></el-pagination>
           </div>
           <!-- 添加SPU或修改SPU的子组件 -->
           <SpuForm ref="spu" v-show="scene==1" @changeScene="changeScene" ></SpuForm>
           <!-- 添加SKU的子组件 -->
           <SkuForm ref="sku" v-show="scene==2" @changeScene="changeScene"></SkuForm>
           <!-- 查看SKU的对话框 -->
           <el-dialog v-model="SPUdialog" title="SPU列表">
                <el-table border :data="skuArr" >
                    <el-table-column label="SKU名字" prop="skuName"></el-table-column>
                    <el-table-column label="价格" prop="price"></el-table-column>
                    <el-table-column label="重量" prop="weight"></el-table-column>
                    <el-table-column label="图片">
                        <template #="{row}"> 
                            <img :src="row.skuDefaultImg" alt="" style="width: 80px;height: 80px;">
                        </template>
                    </el-table-column>
                </el-table>
            
            </el-dialog>
           
        </el-card>

    </div>
</template>

<script setup lang='ts'>
import type { HasSpuResponseData,spuData,SkuData} from '../../../api/product/spu/type';
import { reqHasSpu,reqFindSku,reqDeleteSku} from '@/api/product/spu/index';
import {  onBeforeUnmount, ref, watch } from 'vue';
//引入分类仓库
import useCategroyStore from '@/store/modules/Category';
import type {Records} from '@/api/product/spu/type'
import SkuForm from './skuForm.vue';
import SpuForm from './spuForm.vue';
import { ElMessage } from 'element-plus';
//切换场景
const scene=ref<number>(0)
//当前页面
const pageNow=ref<number>(1)
//每页显示页数
const pageSize=ref<number>(3)
//获取仓库
const useCategroystore=useCategroyStore()
//spu总数
let total=ref<number>(0)

let records=ref<Records>([])
//spuForm子组件实例
let spu=ref()
//skuForm子组件实例
let sku=ref()
const skuArr=ref<SkuData[]>([])
//对话框显隐
const SPUdialog=ref(false)
//监听仓库c3Id数据变化
watch(()=>useCategroystore.c3Id,()=>{
    //保证三级id存在
    if(!useCategroystore.c3Id) return
    getHas()
})
//获取数据请求方法
const getHas=async(pager=1)=>{
    pageNow.value=pager
    const result:HasSpuResponseData=await reqHasSpu(pageNow.value,pageSize.value,useCategroystore.c3Id)
    if(result.code===200){
        records.value=result.data.records
        total.value=result.data.total
    }
  
}

const sizeChange=()=>{
    getHas()
}

//点击新增spu按钮回调
const addSku=()=>{
    //切换场景值为1
    scene.value=1
    spu.value.initAddAttr(useCategroystore.c3Id)
}

const updateSpu=async(row:spuData)=>{
    scene.value=1
    //调用子组件方法
    spu.value.getSpuAttr(row)
    
    
}
//子组件SpuForm绑定自定义事件：目前是让子组件通知父组件切换场景为0
const changeScene=(obj:any)=>{
    //子组件SpuForm点击取消场景变为0：展示已有的SPU
    scene.value=obj.flag
    if(obj.parmars=='update'){
        //更新 留在当前页
        getHas(pageNow.value)
    }else{
        //添加 回到第一页
        getHas()
    }
}
//添加SPU按钮
const addSpu=(row:spuData)=>{
    
    //切换场景
    scene.value=2

    sku.value.initSkuData(useCategroystore.c1Id,useCategroystore.c2Id,row)
}
//查看sku按钮
const findSku=async (row:spuData)=>{
    
    let result=await reqFindSku((row.id as number|string))
    skuArr.value=result.data

    SPUdialog.value=true
}
//删除Spu按钮回调
const removeSpu=async(row:spuData)=>{
    let result=await reqDeleteSku((row.id as number))
    if(result.code==200){
        ElMessage({
            type:'success',
            message:'删除成功'
        })
        //获取剩余的已有的spu数据
        getHas(records.value.length>1?pageNow.value:pageNow.value-1)
    }else{
        ElMessage({
            type:'error',
            message:'删除失败'
        })
    }
}
//组件销毁前清除仓库
onBeforeUnmount(()=>{

    useCategroystore.$reset()
})


</script>

<style scoped lang='scss'>

</style>